{% extends "base.html" %}

{% block title %}Сотрудники{% endblock %}

{% block content %}


<div class="form-container">
    <h1>Создать Сотрудника</h1>
    <form action="{{ url_for('manage_employees') }}" method="post">
        <label>First Name:</label><input type="text" name="first_name" required>
        <label>Last Name:</label><input type="text" name="last_name" required>
        <label>Email:</label><input type="email" name="email" required>
        <label>Username:</label><input type="text" name="username" required>
        <label>Password:</label><input type="password" name="password" required>
        <label>Employee Type:</label><input type="text" name="employee_type" required>
        <label>Access Level:</label><input type="number" name="access_level" min="1" max="5" required>
        <label>Department:</label><input type="text" name="department" required>
        <label>Position:</label><input type="text" name="position" required>
        <label>Hire Date:</label><input type="date" name="hire_date" required>
        <label>Phone Number:</label><input type="text" name="phone_number" required>
        <label>Address:</label><input type="text" name="address" required>
        <label>Status:</label><input type="text" name="status" required>
        <button type="submit">Create Employee</button>
    </form>
</div>

<div class="employees-list">
    <h2>Сотрудники</h2>
    {% for employee in employees %}
    <div class="employee-item">
        <span>{{ employee.first_name }} {{ employee.last_name }} - {{ employee.email }} - {{ employee.access_level }}</span>
        <div>
            <button onclick="openEditModal('{{ employee.employee_id }}', '{{ employee.first_name }}', '{{ employee.last_name }}', '{{ employee.email }}', '{{ employee.username }}', '{{ employee.access_level }}', '{{ employee.employee_type }}', '{{ employee.department }}', '{{ employee.position }}', '{{ employee.hire_date }}', '{{ employee.phone_number }}', '{{ employee.address }}', '{{ employee.status }}')">
                Edit
            </button>
            <button onclick="confirmDelete('{{ employee.employee_id }}')">Delete</button>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Modal for editing employee -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Edit Employee</h2>
        <form id="editEmployeeForm" method="post">
            <input type="hidden" id="editEmployeeId" name="employee_id">
            <label>First Name:</label><input type="text" id="editFirstName" name="first_name" required>
            <label>Last Name:</label><input type="text" id="editLastName" name="last_name" required>
            <label>Email:</label><input type="email" id="editEmail" name="email" required>
            <label>Username:</label><input type="text" id="editUsername" name="username" required>
            <label>Employee Type:</label><input type="text" id="editEmployeeType" name="employee_type" required>
            <label>Access Level:</label><input type="number" id="editAccessLevel" name="access_level" min="1" max="3"
                                               required>
            <label>Department:</label><input type="text" id="editDepartment" name="department" required>
            <label>Position:</label><input type="text" id="editPosition" name="position" required>
            <label>Hire Date:</label><input type="date" id="editHireDate" name="hire_date" required>
            <label>Phone Number:</label><input type="text" id="editPhoneNumber" name="phone_number" required>
            <label>Address:</label><input type="text" id="editAddress" name="address" required>
            <label>Status:</label><input type="text" id="editStatus" name="status" required>
            <button type="submit">Update Employee</button>
        </form>
    </div>
</div>

<!-- Modal for confirming delete -->
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Are you sure you want to delete this employee?</h2>
        <button id="confirmDeleteButton">Yes, delete</button>
        <button class="close cancel">No, cancel</button>
    </div>
</div>


<script>
    // Edit modal
    var editModal = document.getElementById("editModal");
    var deleteModal = document.getElementById("deleteModal");

    function openEditModal(employee_id, first_name, last_name, email, username, access_level, employee_type, department, position, hire_date, phone_number, address, status) {
        document.getElementById("editEmployeeId").value = employee_id;
        document.getElementById("editFirstName").value = first_name;
        document.getElementById("editLastName").value = last_name;
        document.getElementById("editEmail").value = email;
        document.getElementById("editUsername").value = username;
        document.getElementById("editAccessLevel").value = access_level;
        document.getElementById("editEmployeeType").value = employee_type;
        document.getElementById("editDepartment").value = department;
        document.getElementById("editPosition").value = position;
        document.getElementById("editHireDate").value = hire_date;
        document.getElementById("editPhoneNumber").value = phone_number;
        document.getElementById("editAddress").value = address;
        document.getElementById("editStatus").value = status;
        document.getElementById("editEmployeeForm").action = "/edit_employee/" + employee_id;
        editModal.style.display = "block";
    }

    function confirmDelete(employee_id) {
        deleteModal.style.display = "block";
        document.getElementById("confirmDeleteButton").onclick = function () {
            window.location.href = "/delete_employee/" + employee_id;
        };
    }

    var closeButtons = document.getElementsByClassName("close");
    for (var i = 0; i < closeButtons.length; i++) {
        closeButtons[i].onclick = function () {
            editModal.style.display = "none";
            deleteModal.style.display = "none";
        };
    }

    window.onclick = function (event) {
        if (event.target === editModal) {
            editModal.style.display = "none";
        }
        if (event.target === deleteModal) {
            deleteModal.style.display = "none";
        }
    };
</script>
{% endblock %}
